<template>
    <div style="">
        <my-simple-table>

            <my-simple-tr label="基础功能">
                <el-checkbox v-model="checked">备选项</el-checkbox>
            </my-simple-tr>

            <my-simple-tr label="禁用状态">
                <el-checkbox v-model="checked" disabled="">备选项</el-checkbox>
            </my-simple-tr>

            <my-simple-tr label="复选框组">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="复选框 A"></el-checkbox>
                    <el-checkbox label="复选框 B"></el-checkbox>
                    <el-checkbox label="复选框 C"></el-checkbox>
                    <el-checkbox label="禁用" disabled></el-checkbox>
                    <el-checkbox label="选中且禁用" disabled></el-checkbox>
                </el-checkbox-group>
            </my-simple-tr>

            <my-simple-tr label="全选">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
            </my-simple-tr>

            <my-simple-tr label="可选项目数量的限制">
                <el-checkbox-group :min="1" :max="2" v-model="checkedCities" >
                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
            </my-simple-tr>

            <my-simple-tr label="复选按钮">
                <el-checkbox-group :min="1" :max="2" v-model="checkedCities" size="mini">
                    <el-checkbox-button border v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
                </el-checkbox-group>
            </my-simple-tr>

        </my-simple-table>
    </div>
</template>

<style>

</style>

<script>
    const cityOptions = ['上海', '北京', '广州', '深圳'];

    export default {
        name: "my-el-myCheckBox",
        data () {
            return {
                checked: true,
                checkList: ['选中且禁用','复选框 A'],
                indeterminate:true,
                checkAll:false,
                checkedCities: ['上海', '北京'],
                cities: cityOptions,
            };
        },
        methods: {
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }
        }
    }
</script>

